<template>
    <div class="content">
        <div class="top">
            <div class="user">
                <van-image
                        round
                        width="70px"
                        height="70px"
                        :src="img"
                />
                <div class="user_info">
                    <div class="user_name">
                        <span>{{nickname}}</span>
                    </div>
                    <div class="user_state">
                        <span>{{state}}</span>
                    </div>
                </div>
            </div>
            <div class="div_center">
                <van-icon name="phone"/>
                <span>实名认证手机号码</span>
            </div>
        </div>
        <van-dialog v-model="show" @confirm="sendMsgAction" show-cancel-button>
            <van-cell-group class="hd-van-group">
                <van-field class="yanzhengma" v-model="code" placeholder="请输入验证码" @blur="inputBackTop"/>
                <div class="verify">
                    <img class="pic" src="/Api/Api/verify" onclick="this.src+='?' + Math.random();" ref="verifyImg"/>
                </div>
            </van-cell-group>
        </van-dialog>

        <van-cell-group v-if="authState !==1">
            <van-field v-model="phone" disabled label="手机号码"/>
        </van-cell-group>

        <van-cell-group v-if="authState === 1">
            <van-field v-model="mobile" center clearable label="电话号码" placeholder="请输入电话号码" @blur="inputBackTop">
                <van-button class="anniu" slot="button" size="small" color="#6AABDE" :disabled="sendMsgBtnDisabled"
                            @click="showMsgCode">{{sendMsgBtnTitle}}
                </van-button>
            </van-field>
            <van-field
                    @blur="inputBackTop"
                    v-model="msgCode"
                    label="验证码"
                    placeholder="请输入验证码"
            />
        </van-cell-group>

        <div class="div_bottom" v-if="authState != 1">
            <van-icon name="user-o"/>
            <span>实名认证身份证</span>
        </div>

        <van-cell-group v-if="authState === 3 || authState === 4">
            <van-field v-model="userName" disabled label="姓名"/>
            <van-field v-model="cardNo" disabled label="身份证号"/>
            <van-field v-model="address" disabled label="身份地址"/>
        </van-cell-group>

        <div class="button-group">
            <van-button class="btn1" v-if="authState === 1" type="primary" @click="checkCodeAndBindMobile">确认
            </van-button>
            <van-button class="btn2" v-if="authState === 2" type="primary" :loading="upCardLoading" @click="selectImg">
                上传身份证
            </van-button>
            <van-button class="btn2" v-if="authState === 3" type="primary" @click="submit">信息无误 确认实名</van-button>
            <van-button class="error-btn" v-if="authState === 3" type="danger" @click="selectImg">信息有误 重新上传</van-button>
        </div>
    </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import { skv4authCardid, getCodePic, sendMsg, skForeCheckCode, getMyInfo2, newCheckSfz } from '@/api/mine-bind-submit'
import { Dialog, Toast } from 'vant'

export default {
  data () {
    return {
      show: false,
      list: [],
      sendMsgBtnTitle: '发送验证码',
      yanzhenggma: false,
      totalTime: 59,
      code: '', // 图形验证码
      msgCode: '', // 短信验证码
      sendMsgBtnDisabled: false, // 按钮可以点击状态
      authState: 1, // 1-没有绑定手机号，2-绑定手机号，3-绑定身份证号，4-实名成功
      userName: '',
      cardNo: '',
      address: '',
      upCardLoading: false,
      pic: '',
      mobile: '',
      yzm: '',
      id_card: '',
      key: '',
      img: '',
      nickname: '',
      state: '尚未实名认证',
      phone: '',
      btn1: false,
      btn2: false,
      tel: false,
      info: false
    }
  },
  methods: {
    selectImg () {
      let _this = this
      this.$common.wxCallBack(function () {
        wx.chooseImage({
          success: res => {
            _this.upCardLoading = true
            let localIds001 = res.localIds
            _this.upImg(localIds001)
          }
        })
      })
    },
    upImg (localIds001) {
      let _this = this
      wx.uploadImage({
        localId: localIds001[0], // 需要上传的图片的本地ID，由chooseImage接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: function (res1) {
          let serverId = res1.serverId// 返回图片的服务器端ID
          _this.scanCardInfo(serverId)
        }
      })
    },
    scanCardInfo (code) {
      let data = {
        mediaid: code
      }
      newCheckSfz(data).then(ret => {
        let resultData = ret.data.result
        this.upCardLoading = false
        if (resultData.status === 'OK') {
          this.authState = 3
          if (!resultData.data.item.cardno) {
            Toast.fail('身份证号识别失败，请重新扫描')
            return false
          }
          let items = resultData.data.item
          this.userName = items.name
          this.cardNo = items.cardno
          this.address = items.address
        } else {
          Toast.fail('证件号不清楚，请重新上传')
        }
      })
    },
    imgVerification () {
      let data = {}
      getCodePic(data).then(ret => {
        this.pic = ret.data.data.pic
        this.key = ret.data.data.key
      })
    },
    showMsgCode () {
      if (!this.$common.isMobil(this.mobile)) {
        Toast.fail('请输入正确手机号')
        return false
      }
      this.show = true
      let _this = this
      this.code = ''
      setTimeout(function () {
        _this.$refs.verifyImg.click()
      }, 300)
    },
    sendMsgAction () {
      let data = { mobile: this.mobile, code: this.code }
      sendMsg(data).then(ret => {
        let retData = ret.data
        if (retData.status === 1) {
          this.timeInterval()
        } else {
          Dialog.alert({ message: retData.msg })
        }
      })
    },
    checkCodeAndBindMobile () {
      skForeCheckCode({ code: this.msgCode }).then(ret => {
        let result = ret.data
        if (result.status === 1) {
          this.$dialog.confirm({
            title: '认证成功',
            message: '是否继续进行实名认证'
          }).then(() => {
            this.phone = this.mobile
            this.authState = 2
          }).catch(() => {
            // TODO 跳转到其他页面
            this.$router.push({
              name: 'city-card-index-v3'
            })
          })
        } else {
          this.$dialog.alert({ message: result.msg })
        }
      })
    },
    submit () {
      skv4authCardid().then(ret => {
        if (ret.data.status === 1) {
          Dialog.alert({
            message: '认证成功'
          }).then(() => {
            this.$router.back(-1)
          })
        } else {
          Dialog.alert({
            message: ret.data.msg
          }).then(() => {
            // on close
          })
        }
      })
    },
    timeInterval () {
      let _this = this
      this.sendMsgBtnDisabled = true
      setInterval(() => {
        if (_this.sendMsgBtnDisabled) {
          _this.sendMsgBtnTitle = '倒计时..' + _this.totalTime + '秒'
          if (_this.totalTime < 0) {
            _this.totalTime = 59
            this.sendMsgBtnDisabled = false
            _this.sendMsgBtnTitle = '发送验证码'
          } else {
            _this.totalTime--
          }
        }
        /*        else {
                         _this.totalTime = 60
                         _this.btn = '发送验证码'
                         } */
      }, 1000)
    },
    getMyInfo () {
      // 实名制之前手机号不显示
      getMyInfo2().then(ret => {
        let result = ret.data
        if (result.status === 1) {
          this.img = result.result.headimgurl
          this.nickname = result.result.nickname
          if (result.result.Login === 'yes') {
            this.authState = 2
            this.phone = result.result.info.mobile
            if (result.result.info.idcard !== '' && result.result.info.idcard !== null && result.result.info.idcard !== undefined) {
              this.state = '实名会员'
              this.authState = 4
              this.userName = result.result.info.username
              this.cardNo = result.result.info.idcard
              this.address = result.result.info.address
            }
          } else {
            this.authState = 1
          }
        }
      })
    },
    inputBackTop () {
      document.body && (document.body.scrollTop = 0)
    }
  },
  mounted () {
    this.getMyInfo()
  }
}
</script>

<style scoped>
    .content >>> .btn {
        margin-left: 15px;
        margin-right: 15px;
    }

    .btn1 {
        width: 100%;
        background-color: #75ACDC;
        border: #B7D5EF;
    }

    .btn2 {
        width: 100%;
        background-color: #75ACDC;
        border: #B7D5EF;
    }

    .yanzhengma {
        width: 50%;
        float: left;
    }

    .pic {
        height: 100%;
        width: 100%;
    }

    .hd-van-group {
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .user_info {
        display: flex;
        flex-direction: column;
        margin-left: 5%;
        justify-content: center;
    }

    .user {
        display: flex;
    }

    .user_name {
        font-size: 18px;
        font-weight: bold;
    }

    .user_state {
        color: #75ACDC;
        font-size: 14px;
    }

    .div_center {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #75ACDC;
        margin-bottom: 3%;
        margin-top: 15px;
    }

    .div_center span {
        margin-left: 2%;
    }

    .div_bottom span {
        margin-left: 2%;
    }

    .top {
        padding: 10px;
    }

    .van-button--small {
        background-color: #75ACDC;
        color: white;
        border: #B7D5EF;
    }

    .div_bottom {
        display: flex;
        align-items: center;
        color: #75ACDC;
        padding: 10px 15px;
    }

    .info {
        display: none;
    }

    .verify {
        width: 50%;
    }

    .button-group {
        padding: 10px;
    }

    .yanzhengma >>> .van-field__control {
        height: 44px;
        line-height: 24px;
        padding: 12px 5px 12px 0;
        border: 1px solid #9bc413;
        width: 100%;
        box-sizing: border-box;
        font-size: 12px;
        color: #4a622f;
        font-weight: bold;
        letter-spacing: .25rem;
        text-indent: .1rem;
    }

    .error-btn {
        width: 100%;
        margin-top: 10px;
    }
</style>
